<template>
  <div class="test">
    <Popup :popupVisible=true :back="back">


       <div class="p">
      <span class="s1">填写预约信息</span>

      <!-- 房源 -->
    
    <!-- <ZiRoom></ZiRoom> -->
      <!-- 表单 -->
      <div class="d4">
        <mt-field
          label="联系电话"
          placeholder="请输入手机号"
          type="tel"
          v-model="order_phone"
        ></mt-field>
        <mt-field
          label="您的称呼"
          placeholder="请输入姓名,选填"
          type="text"
          v-model="order_name"
        ></mt-field>
        <mt-field
          label="预约时间"
          placeholder="请输入预约时间"
          type="date"
          v-model="order_time"
        ></mt-field>
      </div>

      <!-- 提交按钮 -->
      <mt-button class="submit" @click="order()">提交预约</mt-button>
    </div>
    </Popup>

   
  </div>
</template>
<script>
import Popup from './Popup.vue'
import ZiRoom from './ZiRoom.vue'
export default {
  data(){
    return{
      back:"roomDetails",
      order_name: '',
      order_phone: '',
      phone_state: '',
      order_time: '',
      time_state: '',
      hid: ''
    }
  },
  mounted(){
     if(this.$route.params.hid){
      this.hid=this.$route.params.hid
    }
  },
  methods:{
    checkOrder_time(){
      if(this.order_time !==''){
        this.time_state=''
        return true;
      }else{
        this.time_state='请选择预约时间'
        return false;
      }
    },
    checkOrder_phone(){
      let exp =/^1\d{10}$/;
      if(exp.test(this.order_phone)){
        this.phone_state=''
        return true;
      }else{
        this.phone_state='请输入正确手机号'
        return false;
      }
    },
    order(){
      if(this.checkOrder_phone() && this.checkOrder_time()){
        let uid = this.$store.state.dataUser.uid
        console.log(this.hid);
        this.axios.post('/order',`order_name=${this.order_name}&order_phone=${this.order_phone}&order_time=${this.order_time}&uid=${uid}&hid=${this.hid}`).then((res)=>{
          if (res.data.code == 200){
            this.$toast({
              message: `预约成功`,
              position: "bottom",
              duration: 3000,
              className: "toast"     
            })
          }else {
            this.$toast({
              message: `预约失败${res.data.message}`,
              position: "bottom",
              duration: 3000,
              className: "toast"
            });
          }
        })
      }else{
        if(this.phone_state){
          this.$toast({
            message: this.phone_state,
            position: 'bottom',
            durdation: 3000,
            className: "toast"
        })
        }else if(this.time_state){
          this.$toast({
            message: this.time_state,
            position: 'bottom',
            durdation: 3000,
            className: "toast"
        })
        }
      }
    }
  },
  components:{
    Popup,
    ZiRoom

  },
}
</script>
<style>
.test {
  background-color: rgb(231, 227, 227);
}
.test .mint-button {
  background-color: rgb(231, 227, 227);
}
.test .p {
  margin-top: 5rem;
}
.test .p .s1 {
  font-size: 24px;
  font-weight: bold;
  margin-left: 12px;
}

.test .p .d1 .img1 {
  width: 120px;
  height: 115px;
  border-radius: 10px;
  position: absolute;
  top: 12px;
  left: 10px;
}
.test .p .d1 .d2 {
  position: absolute;
  left: 133px;
  top: 16px;
}
.test .p .d1 .d2 .s2 {
  font-size: 17px;
  margin-left: 10px;
}
.test .p .d1 .d2 .d3 {
  height: 20px;
  background: url("../assets/imgs/定位.png") left no-repeat;
  font-size: 14px;
  padding-left: 20px;
  margin: 30px 10px 0px 0px;
}
.test .p .d4 {
  width: 350px;
  height: 140px;
  border: 1px solid rgb(196, 194, 194);
  margin: 0 auto;
  border-radius: 10px;
  background-color: #fff;
  margin-top: 18px;
  padding-top: 13px;
  margin-bottom: 17px;
  box-shadow: 0px 0px 10px #007d65;
}
.test .p .submit {
  width: 350px;
  height: 50px;
  border-radius: 8px;
  border: 0;
  font-size: 17px;
  line-height: 0;
  background-color: #007d65;
  display: block;
  margin: 0 auto;
  color: #fff;
}
.test .ziroom {
  margin-top: 1rem;
}
.taost{
  z-index: 99999 !important;
}
</style>